<!--
 * @LastEditors: tangdy tdy853839625@qq.com
 * @FilePath: /HumanGenerateVideo/src/views/product-center/_modules/_sider/sider-voice.vue
-->
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { fetchListenVoice } from '@/service/api';
import { useThemeStore } from '@/store/modules/theme';
import { useStore } from '../../store';
const themeStore = useThemeStore();
const store = useStore();
const viewList = computed(() => store.getDict('voice'));
function handleSelect(row: any) {
  if (store.voice.id === row.id) return;
  audio.end(); // 停止别的播放
  store.updateVoice(row);
}

// function getAssetsImgs(item: any) {
//   // 在6张图片中随机使用
//   // return `/src/assets/imgs/voice_${index % 6}.png`;
//   return `/src/assets/imgs/声音-${item.name}.png`;
// }

// 播放音频
const audio = reactive<any>({
  playingId: '',
  ref: null,
  isPlaying: false,
  play: async (row: any) => {
    if (audio.isPlaying) return;

    console.log(audio.playingId, 'audio.playingId');
    if (audio.playingId === row.id) return;

    try {
      audio.isPlaying = true;
      await audio.end();
      audio.playingId = row.id;
      const params = {
        id: row.id,
        text: `你好，我是${row.name}，这是我的声音`
      };
      const { data } = await fetchListenVoice(params);
      console.log('试听接口返回结果：', data);
      if (data.url) {
        audio.ref = new Audio(data.url);
        audio.ref.play();
        audio.ref.addEventListener('ended', audio.end);
      } else {
        window.$message?.warning('音频无法播放');
      }
    } finally {
      audio.isPlaying = false;
    }
  },
  end: () => {
    audio.playingId = '';
    if (audio.ref) {
      audio.ref.pause();
      audio.ref.removeEventListener('ended', audio.end);
    }
    audio.ref = null;
    return Promise.resolve();
  }
});
</script>

<template>
  <div class="list">
    <div class="list-head p-4 pt-6">选择声音</div>
    <NScrollbar class="list-main">
      <ul class="px-4">
        <li
          v-for="item in viewList"
          :key="item.name"
          :class="{ active: store.voice.id === item.id }"
          class="item-card voice-item square flex-col flex-y-center select-none py-3"
          @click.stop="handleSelect(item)"
        >
          <div class="relative h-18 w-18">
            <!-- 暂停播放 -->
            <div
              v-if="item.id === audio.playingId"
              class="absolute-bl z-20 wh-full flex-center rd-50% bg-black/10"
              @click.stop="audio.end"
            >
              <SvgIcon icon="svg-spinners:bars-scale-middle" class="text-10 text-white"></SvgIcon>
              <!-- <img class="h-50% w-50%" src="@/assets/imgs/声音动画@2x.webp" /> -->
            </div>
            <div
              v-if="item.id !== audio.playingId"
              class="playAudio hide absolute-bl z-20 hidden wh-full flex-center cursor-pointer rd-50% bg-black/10"
              @click.stop="audio.play(item)"
            >
              <SvgIcon icon="majesticons:play-circle" class="text-10 text-white"></SvgIcon>
            </div>
            <NImage
              v-if="item.url"
              class="w-full"
              object-fit="contain"
              preview-disabled
              :src="item.url"
              fallback-src="@/assets/imgs/voice_empty_dark.png"
            />
            <!-- <img v-if="!item.url" class="wh-full" :src="getAssetsImgs(item)" /> -->
            <img v-if="!item.url && themeStore.darkMode" class="wh-full" src="@/assets/imgs/voice_empty_dark.png" />
            <img v-if="!item.url && !themeStore.darkMode" class="wh-full" src="@/assets/imgs/voice_empty_light.png" />
          </div>
          <!-- <img v-else class="h-18 w-18" :src="item.url" /> -->
          <p class="mb-0.5 mt-1 text-3.5">{{ item.name }}</p>
          <p class="max-w-80% ellipsis-text text-3 text-light_text">{{ item.descript }}</p>
        </li>
      </ul>
    </NScrollbar>
  </div>
</template>

<style scoped lang="scss">
.voice-item {
  &:hover {
    .playAudio {
      display: flex;
    }
  }
}
</style>
